<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>OA-员工管理</title>
<link rel="stylesheet" href="./resource/layui/css/layui.css">
<script type="text/javascript" src="./resource/js/jquery-2.0.3.js"></script>
<style type="text/css">
.layui-hide {
	text-align: center;
}

.layui-body {
	left: 50px;
}

#tianqi :hover {
	color: #000;
    text-decoration: none;
    cursor: default;
}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo">
					<img src="./resource/image/logo.png"
						style="width: 200px; height: 58px;">
				</div>
				<!-- 头部区域（可配合layui已有的水平导航） -->
				<ul class="layui-nav layui-layout-left">
					<iframe id="tianqi" allowtransparency="true" frameborder="0"
						width="410" height="60" scrolling="no"
						src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=1&v=2&d=2&bd=0&k=&f=ffffff&ltf=009944&htf=cc0000&q=0&e=1&a=1&c=59134&w=410&h=60&align=center"></iframe>
				</ul>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item"><a href="javascript:;"> <img
							src="http://t.cn/RCzsdCq" class="layui-nav-img">
							${sessionScope.emp.empname}
					</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="">修改个人信息</a>
							</dd>
							<dd>
								<a href="">安全设置</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="">退出</a></li>
				</ul>
			</div>


			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-shrink="all"
						lay-filter="test">
						<li class="layui-nav-item"><a class="" href="javascript:;"><i
								class="layui-icon"> &#xe637; </i>考勤</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="punch.html">打卡</a>
								</dd>
								<dd>
									<a href="Empattence.html" class="layui-this">自我考勤查看</a>
								</dd>
								<dd>
									<a href="Deptpattence.html">部门考勤查看</a>
								</dd>
								<dd>
									<a href="Hrpattence.html">员工考勤查看</a>
								</dd>
							</dl></li>
						<li class="layui-nav-item"><a href="javascript:;"><i
								class="layui-icon">&#xe613; </i>请假管理</a>
							<dl class="layui-nav-child">
								<a href="leavepage.html"></i>请假申请</a>
								<dd>
									<a href="leavelist.html">请假审批</a>
								</dd>
							</dl></li>
						<li class="layui-nav-item layui-nav-itemed"><a
							href="javascript:;"><i class="layui-icon">&#xe716; </i>管理</a>
							<dl class="layui-nav-child">
								<c:if
									test="${sessionScope.emp.position!='员工'&&sessionScope.emp.position!='经理'}">
									<dd>
										<a href="Emp.html" class="layui-this">员工管理</a>
									</dd>
								</c:if>
								<c:if test="${sessionScope.emp.position!='员工'}">
									<dd>
										<a href="GetDepts.jsp">部门管理</a>
									</dd>
								</c:if>
								<dd>
									<a href="userinfo.html">个人信息管理</a>
								</dd>
							</dl></li>
						<li class="layui-nav-item"><a href="Note.html">公告</a></li>
					</ul>
				</div>
			</div>
			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div class="layui-container">
					<div class="layui-row" style="padding-top: 50px;">
						<div class="layui-col-md1"></div>
						<!-- 员工表格展示 -->
						<div class="demoTable">
							搜索员工姓名：
							<div class="layui-inline">
								<input class="layui-input" name="id" id="demoReload"
									autocomplete="off">
							</div>
							<button class="layui-btn" data-type="reload">搜索</button>
							<button class="layui-btn" data-type="add" id="AddEmp"
								data-method="offset" data-type="auto">添加员工</button>
						</div>
					</div>
					<table class="layui-hide" id="LAY_table_user" lay-filter="user">
					</table>
					<!-- 表格结束 -->
					<!--<script type="text/html" id="toolbarDemo">
  					<div class="layui-btn-container">
   					<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
  					<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
   					<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  					</div>
					</script> -->

					<script type="text/html" id="barDemo">
  					<button class="layui-btn layui-btn-xs update" lay-event="edit" id="update" >修改</button>
  					<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</button>
					</script>
				</div>
			</div>
		</div>
		<div class="layui-footer">
			<!-- 底部固定区域 -->
			© 中软 - JAVA二阶段项目 - 基于人脸识别的考勤系统 by TeamWork_XM
		</div>
	</div>
	<script src="./resource/layui/layui.js"></script>

	<script>
		layui.use([ 'form', 'table' ], function() {
			var form = layui.form, table = layui.table;
			//方法级渲染
			table.render({
				elem : '#LAY_table_user',
				url : 'EmpServlet?op=GetEmps',
				limit : 10,
				toolbar : '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
				defaultToolbar : [ 'filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
					title : '提示',
					layEvent : 'LAYTABLE_TIPS',
					icon : 'layui-icon-tips',
				} ],
				cols : [ [ {
					checkbox : true,
					fixed : true
				}, {
					field : 'empid',
					title : '员工编号',
					width : 110,
					sort : true,
					fixed : true,
					align : 'center'
				}, {
					field : 'position',
					templet : '<div>{{d.pos.positionname}}</div>',
					title : '员工权限',
					width : 110,
					align : 'center'
				}, {
					field : 'dept',
					templet : '<div>{{d.dept.deptname}}</div>',
					title : '部门名称',
					width : 110,
					sort : true,
					align : 'center'
				}, {
					field : 'empname',
					title : '员工姓名',
					width : 110,
					align : 'center'
				}, {
					field : 'sex',
					title : '性别',
					sort : true,
					width : 80,
					align : 'center'
				}, {
					field : 'hiredate',
					title : '入职时间',
					sort : true,
					width : 215,
					align : 'center'
				}, {
					field : 'salary',
					title : '薪资',
					sort : true,
					width : 105,
					align : 'center'
				}, {
					field : 'username',
					title : '用户名',
					width : 105,
					align : 'center'
				}, {
					field : 'faceflag',
					title : '人脸识别flag',
					sort : true,
					width : 136,
					align : 'center'
				}, {
					field : 'controller',
					title : '操作',
					fixed : 'right',
					toolbar : '#barDemo',
					width : 136,
					align : 'center'
				} ] ],
				id : 'testReload',
				page : true,
				height : 523,
				width : 1278
			});
			//搜索按钮
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							key : demoReload.val()
						}
					}, 'data');
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
			//头工具栏事件
			table.on('toolbar(user)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;

				//自定义头工具栏右侧图标 - 提示
				case 'LAYTABLE_TIPS':
					layer.alert('这是工具栏右侧自定义的一个图标按钮');
					break;
				}
				;
			});

			//监听行工具事件
			table.on('tool(user)', function(obj) {
				var data = obj.data;
				console.log(obj);
				if (obj.event === 'del') {
					layer.confirm('真的删除员工:' + data.empname + '么', function(
							index) {
						delemp(data.empid);
						layer.close(index);
					});
				} else if (obj.event === 'edit') {
					getdata(obj);
					layer.open({
						type : 1,
						formType : 2,
						content : $('#updatediv'),
						area : [ '718px', '645px' ],
					/* value : data.email */
					}, function(value, index) {
						obj.update({
							email : value
						});
						layer.close(index);
					});
				}
			});
		});
		//修改按钮的方法
	</script>

	<!-- 弹出层 -->
	<script type="text/javascript">
		layui.use('layer', function() { //独立版的layer无需执行这一句
			var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
			//触发事件
			var active = {
				offset : function(othis) {
					var type = othis.data('type'), text = othis.text();
					layer.open({
						title : '添加员工',
						type : 2,
						offset : type,
						//,id: 'layerDemo'+type //防止重复弹出
						anim : 5, //弹窗特效
						content : 'AddEmp.jsp', //ifame的页面
						maxmin : true,
						area : [ '774px', '658px' ],//设置弹出层大小
						//, shadeClose: true
						btn : '关闭',
						btnAlign : 'c', //按钮居中
						shade : 0.1, //不显示遮罩
						yes : function() {
							layer.closeAll();
							location.href = "GetEmps.jsp";
						}
					});
				}
			};
			//监听事件
			$('#AddEmp').on('click', function() {
				var othis = $(this), method = othis.data('method');
				active[method] ? active[method].call(this, othis) : '';
			});
			//修改

		});
		function getdata(obj) {
			$('#empid2').val(obj.data.empid);
			$('#position2').val(obj.data.position);
			$('#empname2').val(obj.data.empname);
			$('#deptid2').val(obj.data.deptid);
			$('#sex2').val(obj.data.sex);
			$('#salary2').val(obj.data.salary);
			$('#username2').val(obj.data.username);
			$('#hiredate2').val(obj.data.hiredate);
			$('#faceflag2').val(obj.data.faceflag);
		};
		//修改按钮点击事件操作
		function updataemp() {
			$.ajax({
				type : 'get',
				dataType : "json",
				url : "EmpServlet",
				data : $("#updatatable").serialize(),
				success : function(result) {
					if (result == "修改员工成功") {
						layer.closeAll();
						location.href = "GetEmps.jsp";
					}
				}
			});
		};
		//删除员工的方法
		function delemp(empid) {
			$.ajax({
				type : 'get',
				dataType : "json",
				url : "EmpServlet",
				data : {
					"empid" : empid,
					"op" : 'DeleteEmp'
				},
				success : function(result) {
					console.log(result);
					if (result == "删除员工成功") {
						layer.closeAll();
						location.href = "GetEmps.jsp";
					}
				}
			});
		};
	</script>
	<div id="updatediv" style="display: none; width: 645px;">

		<form class="layui-form" action="" id="updatatable">

			<div class="layui-form-item">
				<label class="layui-form-label">员工编号</label>
				<div class="layui-input-block">
					<input type="text" name="empid" id="empid2" required
						lay-verify="required" readonly class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">员工职位</label>
				<div class="layui-input-block">
					<input type="text" name="position" id="position2" required
						lay-verify="required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">部门编号</label>
				<div class="layui-input-block">
					<input type="text" name="deptid" id="deptid2" required
						lay-verify="required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">员工姓名</label>
				<div class="layui-input-block">
					<input type="text" name="empname" id="empname2" required
						lay-verify="required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">员工性别</label>
				<div class="layui-input-block">
					<input type="text" name="sex" id="sex2" required
						lay-verify="required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">入职时间</label>
				<div class="layui-input-block">
					<input type="text" name="hiredate" id="hiredate2" required
						lay-verify="required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">薪资</label>
				<div class="layui-input-block">
					<input type="text" name="salary" id="salary2" required
						lay-verify="required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">登录用户名</label>
				<div class="layui-input-block">
					<input type="text" name="username" id="username2" required
						lay-verify="required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">人脸识别flag</label>
				<div class="layui-input-block">
					<input type="text" name="faceflag" id="faceflag2" required
						lay-verify="required" class="layui-input">
				</div>
			</div>
			<input type="text" value="UpdateEmp" name="op" hidden="hidden">
			<div class="layui-form-item">
				<label class="layui-form-label"></label>
				<div class="layui-input-block">
					<button class="layui-btn" type="button" onclick="updataemp()"
						id="index_updataemp" style="left: 1000px;">提交</button>
					<button class="layui-btn" type="button" onclick="layer.closeAll()">取消</button>
				</div>
			</div>

		</form>
	</div>
</body>
</html>